<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .watermark {
            border: 1px solid #8470FF;
            text-align: center;
            width: 300px;
            height: 120px;
            line-height: 120px;
        }

        .watermark::before {
            content: "watermark";
            opacity: 0.5;
            font-size: 20px;
            color: darkgoldenrod;
            transform: rotate(-30deg);
            pointer-events: none;
        }


        .watermarked-element {
            width: 1000px;
            height: 600px;
            background-image: url('./imgs/watermark.png'); /* 水印图片的URL */
            background-repeat: repeat; /* 重复水印图片 */
            opacity: 0.5; /* 设置水印透明度 */
            pointer-events: none; /* 防止水印干扰用户交互 */
            margin-top:20px;
        }


    </style>
</head>
<body>

<div class="watermark"></div>
<div class="watermarked-element"></div>


<canvas id="watermarkCanvas" width="300" height="200" style="margin-top:120px "></canvas>

<!-- 示例代码 -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
 <text x="10" y="40" font-family="Arial" font-size="24" fill="rgba(255, 0, 0, 0.5)">
  Watermark Text
 </text>
</svg>


<script>
    const canvas = document.getElementById("watermarkCanvas");
    const context = canvas.getContext("2d");

    const image = new Image();
    image.src = "./imgs/大海001.jpg";

    image.onload = function () {
        context.drawImage(image, 0, 0, canvas.width, canvas.height);

        context.font = "48px Arial";
        context.fillStyle = "rgba(255, 0, 0, 0.5)";
        context.fillText("Watermark Text", 50, 125);
    };
</script>

</body>
</html>
